<template>
    <div class="icon-picker-content">
        <a-popover :visible="visible" class="icon-picker-popover" position="top" title="Title" trigger="click">
            <template #content>
                <a-tabs v-model:activeKey="activeKey">
                    <a-tab-pane v-for="tab in iconTabsMap" :key="tab.name" :title="tab.name">

                        <div class="grid grid-cols-10 gap-3 ">
                            <div v-for="icon in paginatedIcons" :key="icon"
                                class="w-12 h-12 hover:bg-gray-100  dark:hover:text-black rounded-md flex items-center justify-center cursor-pointer"
                                @click="handleSelect(icon)">
                                <m-form-icon :name="icon" />
                                <!-- {{ icon }} -->
                            </div>
                        </div>

                        <div class="flex justify-center py-4">
                            <a-pagination v-model:current="currentPage" :total="currentIconList.length"
                                :pageSize="pageSize" simple class="mt-4" />

                        </div>
                    </a-tab-pane>
                </a-tabs>
            </template>

            <a-input :style="{ width: '320px' }" allow-clear :model-value="modelValue"
                @update:model-value="updateValue" @focus="visible = true">
                <template #prefix>
                    <m-form-icon :name="modelValue == '' ? 'arco-icon-IconUser' : modelValue" />
                </template>
            </a-input>
        </a-popover>
    </div>
</template>

<script setup lang="ts">
import { getArcoIconsName, getLocalIconNames } from './index';

const currentPage = ref(1);
const pageSize = 50;
const visible = ref(false);

interface Props {
    modelValue: string
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: '',
});

const activeKey = ref('ArcoDesignIcon');
const emits = defineEmits<{
    (e: 'update:modelValue', value: string): void
    (e: 'change', value: string): void
}>();

const updateValue = (value: string) => {
    emits('update:modelValue', value);
    emits('change', value);
};

const handleSelect = (icon: string) => {
    updateValue(icon);
    visible.value = false;
};

const iconTabsMap = [
    {
        name: 'ArcoDesignIcon',
        iconList: getArcoIconsName()
    },
    {
        name: 'LocalIcon',
        iconList: getLocalIconNames()
    },
]

const currentIconList = computed(() => {
    const currentTab = iconTabsMap.find(tab => tab.name === activeKey.value);
    return currentTab ? currentTab.iconList : [];
});

const paginatedIcons = computed(() => {
    const start = (currentPage.value - 1) * pageSize;
    const end = start + pageSize;
    return currentIconList.value.slice(start, end);
});

watch(activeKey, () => {
    currentPage.value = 1;
});

</script>

<style>
.icon-picker-popover.arco-trigger-popup {
    width: 650px;
    /* height: 650px; */
    /* max-height: 400px; */
    /* overflow-y: auto; */
}

/* 
:deep(.arco-popover-content) {
    padding: 0 !important;
}

:deep(.arco-tabs-content) {
    padding: 12px;
}

:deep(.arco-tabs-header) {
    padding: 8px 12px 0;
    margin: 0;
} */
</style>